<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>此房间 所有入住人信息</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->
</head>

<body>
<!--用于展示该房间入住信息 和添加入住-->
<fieldset class="layui-elem-field site-demo-button">
    <legend style="text-align:center;">新客入住</legend>

    <!--用于新增的表单 开始 -->
    <form class="layui-form" id="form" method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="cname" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="text" name="csex" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" name="scard" lay-verify="identity" placeholder="" autocomplete="off"
                           class="layui-input">
                </div>
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="tel" name="cphone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入住时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="test1" name="checkintime" autocomplete="off" class="layui-input" >
                </div>
            </div>
        </div>
        <!--        隐藏域 提交房间 id-->
        <input type="hidden" id="room_id" name="room_id" value=room_id>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!--用于新增的表单 结束 -->
</fieldset>

<!--表格-->
<table class="layui-hide" id="LAY_table_order" lay-filter="LAY_table_order"></table>
<!--工具栏-->
<script type="text/html" id="del">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

<!--所有自定义js-->
<script>

    //获取父页面传来的字符串格式的 room_id
    function child(obj) {
        //获取父页面传过来的字符串 注意一定要转为json对象!
        var room_id = JSON.parse(obj);
        //为隐藏域赋值
        $("#room_id").attr("value", room_id);

        layui.use('table', function () {
            var table = layui.table;
            //表单的 方法级渲染
            table.render({
                elem: '#LAY_table_order'
                //拼接访问路径 只显示当前页面的住户信息
                , url: '/checkIn/findByRoomId?room_id=' + room_id
                , cols: [[
                    {checkbox: true, fixed: true}
                    , {field: 'cname', title: '姓名', width: 80, fixed: 'left', unresize: true, sort: true}
                    , {field: 'csex', title: '性别', width: 80, sort: true}
                    , {field: 'scard', title: '身份证', width: 180}
                    , {field: 'cphone', title: '电话', width: 120}
                    , {field: 'checkintime', title: '入住时间', width: 150}
                    , {fixed: 'right', title: '操作', toolbar: '#del', width: 100}
                ]]
                , id: 'checkinReload'
                , page: true
                , height: 310
            });

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听工具栏 的操作事项
            table.on('tool(LAY_table_order)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
            });
        });
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate 日期类型实例
        laydate.render({
            elem: '#test1',//指定元素
            mix: 0
        });
    });


    //函数: 添加入住信息
    function addCheckIn() {
        $.ajax({
            url: "/checkIn/add",
            data: $("#form").serialize(),
            success: function (data) {
                layer.msg(data);
            }
        })
    }

    layui.use('form', function () {
        var form = layui.form;
        //监听form表单提交
        form.on('submit(formDemo)', function (data) {
            addCheckIn();
            location.reload();
            return false;
        });
    });



</script>

</body>
</html>